<template>
	<view class="partner-bg">
		<!-- 自定义头部 -->
		<view class="custom-header">
			<view class="header-left">
				<image :src="globalConfig.site_url + topData.top_left" class="brand-icon"></image>
				<view class="header-title-box">
					<text class="main-title">{{ globalConfig.name }}</text>
					<!-- <text class="sub-title">遇见你的灵魂搭子</text> -->
				</view>
			</view>
			<view class="header-right">
				<text class="iconfont icon-more"></text>
				<text class="iconfont icon-scan"></text>
			</view>
		</view>

		<!-- 卡片区：左1右2撑满 -->
		<view v-if="globalConfig.examine != 1" class="card-row-flex">
			<view class="main-card glass">
				<u-icon name="filter" size="32" color="#fff" class="filter-icon" />
				<text class="card-title">遇见</text>
				<text class="card-sub">遇见属于你的灵魂搭子</text>
				<view class="main-btn-row">
					<view class="main-btn" @click="confirmMatch">
						去遇见 <u-icon name="arrow-right" size="16" color="#fff" />
					</view>
				</view>
				<text class="main-bg-text">搭子</text>
				<view class="avatar-bar">
					<u-avatar v-for="(item, i) in avatars" :key="i" size="36" :src="item" style="margin-right:8rpx;" />
					<view class="avatar-mask"></view>
				</view>
			</view>
			<view class="side-cards-vertical">
				<view class="side-card pink">
					<text class="side-title">交换瞬间</text>
					<text class="side-desc">与7秒后的陌生人相遇</text>
					<view class="side-btn pink-btn" @click="handleFishClick">
						捞一个 <u-icon name="arrow-right" size="12" color="#fff" />
					</view>
					<image class="side-img" src="/static/bottle.png" mode="aspectFit" />
				</view>
				<view class="side-card orange">
					<text class="side-title">附近搭友</text>
					<text class="side-desc">比外卖先到的是搭子</text>
					<view class="side-btn orange-btn" @click="handleNearbyClick">
						马上搭 <u-icon name="arrow-right" size="12" color="#fff" />
					</view>
					<view class="star-decor"></view>
				</view>
			</view>
		</view>
		<view v-else class="examine-image-container">
			<image src="/static/examine-default.png" mode="aspectFit" class="examine-image"></image>
		</view>

		<!-- 城市&标签筛选区 -->
		<view v-if="cities.length > 0 || tags.length > 0" class="filter-bar">
			<view class="city-row">
				<scroll-view scroll-x class="city-scroll">
					<view class="city" v-for="(city, i) in cities" :key="city.id"
						:class="{ active: city.id === selectedCity.id }" @click="handleCityChange(city)">
						{{ city.name }}
					</view>

				</scroll-view>
				<view class="city-more" @click="goToCitySelect">更多 <u-icon name="arrow-right" size="12"
						color="#57C8F2" />
				</view>
			</view>
			<view class="tag-row">
				<view v-for="(tag, i) in tags" :key="tag.id" class="tag"
					:class="{ 'tag-active': tag.id === selectedTag }" @click="handleTagChange(tag)">
					{{ tag.name || tag }}
				</view>
			</view>
		</view>
		<view v-else class="no-data">暂无筛选数据</view>
		<!-- 组队列表区 -->
		<view class="team-list-container" v-if="teamList.length > 0 && globalConfig.examine != 1">
			<view v-for="(teamInfo, index) in teamList" :key="teamInfo.id" class="team-banner"
				@click="goToTeamDetail(teamInfo)">
				<view class="team-info">
					<view class="team-title-row">
						<text class="team-title">{{ teamInfo.title || '未知组队' }}</text>
						<view class="gender-tag all" v-if="teamInfo.sex == 1">男女不限</view>
						<view class="gender-tag nan" v-if="teamInfo.sex == 2">仅限男生</view>
						<view class="gender-tag nv" v-if="teamInfo.sex == 3">仅限女生</view>
					</view>
					<view class="team-member-list">
						<text class="team-shop">{{ teamInfo.shop_title || teamInfo.shop || '未知店铺' }}</text>
						<view class="team-time">
							<text>{{ teamInfo.time || '未知时间' }}</text>
						</view>
					</view>
					<view class="team-status">
						<view class="member-info">
							<u-avatar :src="globalConfig.site_url + teamInfo.user_info.image" size="64" />
							<text
								class="member-count">{{ (teamInfo.members || teamInfo.currentMembers || 0) + '/' + (teamInfo.max_members || teamInfo.maxMembers || 0) }}人</text>
						</view>
						<view class="distance-info">
							<u-icon name="map" size="24" color="#fff" class="status-icon"></u-icon>
							<text class="distance">{{ teamInfo.distance || '未知距离' }}</text>
						</view>
						<!-- <u-icon name="share" size="28" color="#fff" class="share-icon"></u-icon> -->
					</view>
				</view>
				<u-button size="mini" class="exit-btn-card" v-if="teamInfo.user_info.id == userInfo.id">已加入</u-button>
				<u-button size="mini" class="exit-btn-card" v-else @click="goToTeamDetail(teamInfo)">立即加入</u-button>
			</view>
		</view>
		<!-- 插画&引导区 -->
		<view v-if="!teamList.length  && globalConfig.examine != 1" class="guide-section">
			<text class="guide-text">试试下面 + 号，遇见你的搭子~</text>
		</view>
		<!-- 底部功能按钮 -->
		<view v-if="!teamList.length && globalConfig.examine != 1" class="bottom-btn-bar">
			<view class="plus-btn" @click="handlePlusBtn">
				<view class="plus-circle">
					<u-icon name="plus" size="24" color="#9C6CFE" />
				</view>
				<text class="plus-text">找搭子</text>
				<text class="plus-sub">缺人一起嗨？</text>
			</view>
		</view>
		<!-- uView登录弹窗 (from shop-list.vue) -->
		<u-popup v-model="showLoginPopup" mode="center" border-radius="16" width="600rpx" :mask-close-able="true"
			@close="closeLoginPopup">
			<view class="login-popup">
				<view class="popup-header">
					<view class="popup-title">登录</view>
					<view class="popup-close" @click="closeLoginPopup">
						<u-icon name="close" color="#999" size="20"></u-icon>
					</view>
				</view>

				<view class="login-methods">
					<u-button type="success" shape="round" :loading="wechatLoading" @click="handleWechatLogin"
						:custom-style="{ backgroundColor: '#07c160', borderColor: '#07c160', marginBottom: '20rpx' }">
						<u-icon name="weixin-fill" color="#fff" size="20" style="margin-right: 10rpx"></u-icon>
						{{ wechatLoading ? '登录中...' : '微信登录' }}
					</u-button>
				</view>

				<view class="login-tips">
					<u-checkbox v-model="agreePolicy" shape="circle" active-color="#007aff" :size="32"
						style="margin-right: 10rpx;" />
					<text class="tips-text">我已阅读并同意</text>
					<text class="link-text" @click="showPrivacy('agreement')">《用户协议》</text>
					<text class="tips-text">和</text>
					<text class="link-text" @click="showPrivacy('policy')">《隐私政策》</text>
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		getRecommendPartners,
		getTeamList
	} from '@/api/partner.js'
	import {
		checkLoginStatus,
		wechatMiniLogin
	} from '@/common/auth.js';
	import {
		getUserInfo,
		updateUserInfo,
		getUserTags
	} from '@/api/user.js' // 假设你的接口
	import {
		mapGetters,
		mapActions,
		mapState
	} from 'vuex';

	// 新增 mock matchPartner 函数，实际项目中替换为真实接口
	const matchPartner = (params) => {
		return new Promise((resolve) => {
			setTimeout(() => {
				resolve({
					code: 200,
					data: {}
				})
			}, 500)
		})
	}

	export default {
		name: 'PartnerIndex',
		data() {
			return {
				showLoginPopup: false,
				agreePolicy: false,
				wechatLoading: false,
				tools: [],
				cities: [],
				tags: [],
				avatars: [],
				topData: {},
				selectedCity: '',
				selectedTag: '',
				recommendList: [],
				teamList: [], // 新增组队列表数据
				defaultAddress: {},
				loading: false,
				page: 1,
				longitude: '',
				latitude: '',
				showMatchPopup: false,
				selectedGender: 'all',
				ageRange: [18, 29],
				allowMatching: true
			}
		},
		onload(options) {
			this.checkLoginStatusAndLoadData();
		},
		onShow() {
			this.checkLoginStatusAndLoadData();
			// 监听新建/编辑/发布成功事件，刷新页面
			uni.$on('refreshPartnerIndex', () => {
				this.checkLoginStatusAndLoadData();
			});
		},
		onUnload() {
			// 页面卸载时移除事件监听，防止内存泄漏
			uni.$off('refreshPartnerIndex');
		},
		mounted() {
			this.checkLoginStatusAndLoadData();
		},
		computed: {
			currentLocation() {
				return this.getLocation;
			},
			// 使用mapGetters获取全局状态
			...mapGetters([
				'getGaodeKey',
				'getSiteName'
			]),

			// 使用mapState直接访问state
			...mapState({
				globalConfig: state => state.config,
				userLocation: state => state.location,
				userInfo: state => state.userInfo,
			})
		},
		watch: {
			currentLocation(newVal) {
				if (newVal.longitude && newVal.latitude) {
					this.FnGetTeamList();
				}
			}
		},
		methods: {
			showPrivacy(type) {
				// 获取协议标题
				let title = type === 'agreement' ? '用户协议' : '隐私政策';
				// 获取全局配置里的 yinsi 内容
				const yinsi = this.globalConfig?.yinsi || '';
				uni.navigateTo({
					url: `/pages/common/rich-text?title=${encodeURIComponent(title)}&content=${encodeURIComponent(yinsi)}`
				});
			},
  			async upUserInfo() {
				// 这里假设你有全局经纬度
				const long = this.userLocation.longitude || '';
				const lat = this.userLocation.latitude || '';
				const params = {
					long,
					lat
				};
				try {
					const res = await updateUserInfo(params); // 你的GET接口
					console.log(res, 'updateUserInfo response');
					if (res.data.code !== 1) {
						uni.showToast({
							title: res.data.msg || '保存失败',
							icon: 'none'
						});
						return;
					}
				} catch (e) {
					console.log(e, 'e');
				}
			},
			async goToTeamDetail(item) {
				const isLoggedIn = await checkLoginStatus();
				if (!isLoggedIn) {
					this.showLoginPopup = true;
					return;
				}
				console.log(item, 'goToTeamDetail');
				uni.navigateTo({
					url: `/pages/chat/detail?teamId=${item.id}&isTeamChat=true&userId=${this.userInfo.id}&nickName=${this.userInfo.nickName}&teamInfo=${JSON.stringify(item)}`
				})
			},
			handleBrandStoryClick() {
				uni.navigateTo({
					url: '/pages/brand/story'
				})
			},
			// 显示匹配条件选择弹窗
			async handleMeetClick() {
				this.showMatchPopup = true;
			},
			// 处理年龄滑块变化
			handleAgeChange(e) {
				this.ageRange = e;
			},
			// 确认匹配条件并发起匹配
			async confirmMatch() {
				const isLoggedIn = await checkLoginStatus();
				if (!isLoggedIn) {
					this.showLoginPopup = true;
					return;
				}
				this.loading = true;
				try {
					// 调用匹配接口，传递用户选择的条件
					const res = await matchPartner({
						city: this.selectedCity?.id || '',
						tag: this.selectedTag,
						gender: this.selectedGender,
						min_age: this.ageRange[0],
						max_age: this.ageRange[1],
						allow_matching: this.allowMatching
					});
					if (res.code === 200) {
						// 跳转到匹配中页面
						uni.navigateTo({
							url: '/pages/partner/matching'
						});
					} else {
						uni.showToast({
							title: res.msg || '匹配失败',
							icon: 'none'
						});
					}
				} catch (error) {
					uni.showToast({
						title: '匹配失败',
						icon: 'none'
					});
					console.error('匹配失败:', error);
				} finally {
					this.loading = false;
					this.showMatchPopup = false;
				}
			},
			async handleFishClick() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				});
				return
				this.loading = true
				try {
					await matchPartner({
						type: 'fish',
						city: this.selectedCity
					})
					uni.showToast({
						title: '已捞一个',
						icon: 'success'
					})
					await this.getRecommend()
				} catch (error) {
					uni.showToast({
						title: '捞取失败',
						icon: 'none'
					})
					console.error('捞取失败:', error)
				} finally {
					this.loading = false
				}
			},
			async handleNearbyClick() {
				const isLoggedIn = await checkLoginStatus();
				if (!isLoggedIn) {
					this.showLoginPopup = true;
					return;
				}
				// 跳转到附近搭友列表页面
				uni.navigateTo({
					url: '/pages/partner/nearby-list',
					fail: (err) => {
						console.error('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			handleCityChange(city) {
				console.log('选中的城市:', city);
				this.selectedCity = city
				console.log(this.selectedCity.id, 'this.selectedCity.id');
				this.FnGetTeamList()
			},
			async getLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: (res) => {
							this.longitude = res.longitude;
							this.latitude = res.latitude;
							resolve(res);
						},
						fail: (err) => {
							console.error('获取位置失败:', err);
							uni.showToast({
								title: '获取位置失败',
								icon: 'none'
							});
							reject(err);
						}
					});
				});
			},
			handleTagChange(tag) {
				if (!tag) return;
				this.selectedTag = tag.id;
				this.FnGetTeamList();
			},
			async handlePlusBtn() {
				const isLoggedIn = await checkLoginStatus();
				if (!isLoggedIn) {
					this.showLoginPopup = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/partner/publish'
				});
			},

			async handleWechatLogin() {
				// 判断有没有勾选隐私
				if (!this.agreePolicy) {
					this.$u.toast('请先勾选同意《用户协议》和《隐私政策》');
					return;
				}
				if (this.wechatLoading) return;
				this.wechatLoading = true;
				try {
					const result = await wechatMiniLogin();
					if (result.success) {
						this.$store.dispatch('fetchUserInfoAction');
						this.closeLoginPopup();
						this.$u.toast('登录成功');
						this.getRecommend();
					} else {
						throw new Error(result.message || '登录失败');
					}
				} catch (error) {
					this.$u.toast(error.message || '登录操作失败');
				} finally {
					this.wechatLoading = false;
				}
			},
			closeLoginPopup() {
				this.showLoginPopup = false;
				this.wechatLoading = false;
			},
			async checkLoginStatusAndLoadData() {
				try {
					// const isLoggedIn = await checkLoginStatus();
					// if (!isLoggedIn) {
					// 	this.showLoginPopup = true;
					// 	return;
					// }
					this.getRecommend();
				} catch (error) {
					console.error('登录状态检查失败:', error);
					this.showLoginPopup = true;
				}
			},
			async getRecommend() {
				this.loading = true
				// 读取缓存中的城市信息
				const cachedCity = uni.getStorageSync('selectedCity');
				if (cachedCity) {
					this.selectedCity = cachedCity;
					this.$store.commit('SET_LOCATION', {
						cityId: cachedCity.id,
						cityName: cachedCity.name
					});
				}
				console.log(this.userLocation, 'userLocation from state');
				// 先获取位置信息
				await this.getLocation();
				try {
					const res = await getRecommendPartners({
						long: this.userLocation.longitude,
						lat: this.userLocation.latitude,
						city_id: this.selectedCity?.id || ''
					});
					console.log('接口返回数据:', res.data);
					const resData = res.data.data;

					if (resData) {
						this.upUserInfo();
						this.tools = resData.tools || []
						// 先获取接口返回的城市列表
						const apiCities = resData.address || [];
						this.apiCities = apiCities; // 保存接口返回的城市列表
						// 获取缓存中的城市信息
						const cachedCity = uni.getStorageSync('selectedCity');
						// 调试日志
						console.log('缓存城市信息:', cachedCity);
						console.log('接口返回城市列表:', apiCities);
						// 如果有缓存城市且不在接口列表中，则添加到列表首位
						if (cachedCity && cachedCity.id) {
							const cityExists = apiCities.some(city => city.id === cachedCity.id);
							console.log('缓存城市是否已存在于接口列表:', cityExists);
							if (!cityExists) {
								// 创建新数组以触发Vue响应式更新
								this.cities = [cachedCity, ...apiCities];
								console.log('已将缓存城市添加到列表:', this.cities);
								// 使用缓存后删除缓存数据
								uni.removeStorageSync('selectedCity');
								console.log('已删除缓存中的城市信息');
							} else {
								this.cities = apiCities;
							}
						} else {
							this.cities = apiCities;
						}
						this.tags = resData.type || [];
						// 解析tag_ids并设置标签选中状态
						const tagIds = resData.tag_ids ? resData.tag_ids.split(',').filter(id => id).map(Number) : [];
						this.tags.forEach(tag => {
							tag.selected = tagIds.includes(tag.id);
						});
						// 增加一个全部默认选择全部
						this.tags.unshift({
							id: '-1',
							name: '全部',
							selected: true
						});
						this.$store.commit('SET_ACTIVITY_TYPES', resData.type || [])
						this.defaultAddress = resData.default_address || {};
						// 保存默认城市信息到缓存和Vuex
						if (resData.default_address && resData.default_address.id && resData.default_address.name) {
							uni.setStorageSync('selectedCity', {
								id: resData.default_address.id,
								name: resData.default_address.name
							});
							this.$store.commit('SET_LOCATION', {
								cityId: resData.default_address.id,
								cityName: resData.default_address.name
							});
							const defaultAddress = resData.default_address;
							// 从apiCities中查找匹配的城市，如果存在则使用，否则使用默认地址
							const matchedCity = cachedCity
							this.selectedCity = matchedCity || defaultAddress;
						}
						console.log('this.defaultAddress:', this.defaultAddress);
						// 默认选中城市
						if (!this.selectedCity && this.cities.length > 0) {
							this.selectedCity = this.defaultAddress; // 使用id而非name
						}
						// 默认选中标签
						if (!this.selectedTag && this.tags.length > 0) {
							this.selectedTag = this.tags[0].id; // 使用id而非name
						}
						this.FnGetTeamList();
					}
				} catch (error) {
					uni.showToast({
						title: '获取推荐数据失败',
						icon: 'none'
					})
					console.error('获取推荐数据失败:', error)
				} finally {
					this.loading = false
				}
			},
			async FnGetTeamList() {
				this.loading = true
				try {
					const res = await getTeamList({
						area_id: this.selectedCity.id || 0,
						type_id: this.selectedTag || (this.tags.length > 0 ? this.tags[0].id :
							''), // 使用id而非name
						long: this.longitude,
						lat: this.latitude,
						page: this.page,
					});

					console.log(this.selectedCity, 'this.selectedCity');
					console.log(this.selectedCity.id, 'this.selectedCity.id');
					console.log('接口返回数据:', res.data);
					const resData = res.data.data;
					// 将API返回的列表数据绑定到组件数据
					this.teamList = resData.list || [];
				} catch (error) {
					console.error('获取团队列表失败:', error);
				} finally {
					this.loading = false;
				}
			},
			async goToCitySelect() {
				const isLoggedIn = await checkLoginStatus();
				if (!isLoggedIn) {
					this.showLoginPopup = true;
					return;
				}
				uni.navigateTo({
					url: '/pages/city/select',
					events: {
						selectCity: (data) => {
							this.selectedCity = {
								id: data.area_id,
								name: data.city_name
							};
							this.getRecommend(); // 调用getRecommend刷新城市列表和团队数据
						}
					}
				});
			},
		}
	}
</script>

<style scoped>
	.examine-image-container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.examine-image {
		width: 100%;
		height: auto;
		border-radius: 16rpx;
	}
</style>

<style scoped lang="less">
	.partner-bg {
		min-height: 100vh;
		background: #1a191e;
		padding-top: 100rpx;
	}

	/* 组队列表样式 */
	.team-list-container {
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.section-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
		padding-left: 10rpx;
		border-left: 6rpx solid #57C8F2;
	}

	.team-list {
		background: rgba(255, 255, 255, 0.08);
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.3);
	}

	.team-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 16rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		background: rgba(255, 255, 255, 0.05);
		transition: all 0.3s ease;
	}

	.team-item:last-child {
		margin-bottom: 0;
	}

	.team-item:hover {
		background: rgba(255, 255, 255, 0.1);
		transform: translateY(-2rpx);
	}

	.team-title {
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 10rpx;
	}

	.team-shop {
		color: #fff;
		font-size: 26rpx;
		margin-bottom: 14rpx;
	}

	.team-meta {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #999;
		font-size: 24rpx;

		.team-members {
			display: flex;
			margin-left: 10rpx;
		}
	}

	.team-distance {
		color: #57C8F2;
		font-size: 26rpx;
		font-weight: 500;
		padding: 8rpx 16rpx;
		background: rgba(87, 200, 242, 0.1);
		border-radius: 20rpx;
	}

	.no-team-data {
		color: #888;
		text-align: center;
		padding: 100rpx 0;
		font-size: 28rpx;
		background: rgba(255, 255, 255, 0.05);
		border-radius: 16rpx;
	}

	.custom-header {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.header-left {
		display: flex;
		align-items: center;
	}

	.brand-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 16rpx;
		margin-right: 16rpx;
	}

	.header-title-box {
		display: flex;
		flex-direction: column;
	}

	.main-title {
		font-size: 34rpx;
		color: #57C8F2;
		font-weight: bold;
	}

	.sub-title {
		font-size: 26rpx;
		color: #B0B0B0;
		line-height: 30rpx;
		margin-top: 4rpx;
	}

	.header-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.card-row-flex {
		display: flex;
		flex-direction: row;
		gap: 24rpx;
		padding: 0 24rpx;
		margin-bottom: 32rpx;
		width: 100vw;
		box-sizing: border-box;
	}

	.main-card {
		flex: 0 0 calc(60% - 10rpx);
		max-width: calc(60% - 10rpx);
		min-width: 0;
		height: 340rpx;
		border-radius: 24rpx;
		background: linear-gradient(180deg, #7BDFFE 0%, #49B8E6 100%);
		position: relative;
		padding: 24rpx 20rpx 0 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.glass {
		backdrop-filter: blur(8rpx);
	}

	.filter-icon {
		position: absolute;
		right: 16rpx;
		top: 16rpx;
	}

	.card-title {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 24rpx;
		margin-left: 20rpx;
	}

	.card-sub {
		font-size: 24rpx;
		color: #fff;
		margin: 6rpx 0 0 20rpx;
		line-height: 30rpx;
	}

	.main-btn-row {
		margin: 24rpx 0 0 20rpx;
	}

	.main-btn {
		width: 120rpx;
		height: 48rpx;
		border-radius: 16rpx;
		background: #1976d2;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-bg-text {
		position: absolute;
		right: 24rpx;
		top: 120rpx;
		font-size: 80rpx;
		color: rgba(255, 255, 255, 0.2);
		font-weight: bold;
	}

	.avatar-bar {
		display: flex;
		align-items: center;
		position: absolute;
		left: 20rpx;
		bottom: 16rpx;
	}

	.avatar-mask {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 8rpx;
		background: rgba(200, 200, 200, 0.3);
		border-radius: 0 0 24rpx 24rpx;
	}

	.side-cards-vertical {
		flex: 0 0 calc(40% - 20rpx);
		max-width: calc(40% - 20rpx);
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.side-card {
		width: 100%;
		height: 160rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 16rpx 16rpx 0 16rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.pink {
		background: linear-gradient(180deg, #FFB6E8 0%, #FF8DD3 100%);
	}

	.orange {
		background: linear-gradient(180deg, #FFC494 0%, #FFA970 100%);
	}

	.side-title {
		font-size: 28rpx;
		color: #fff;
		font-weight: bold;
		margin-top: 16rpx;
		margin-left: 16rpx;
	}

	.side-desc {
		font-size: 20rpx;
		color: #fff;
		margin: 4rpx 0 0 16rpx;
		line-height: 24rpx;
	}

	.side-btn {
		width: 100rpx;
		height: 40rpx;
		border-radius: 12rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 8rpx 0 0 16rpx;
	}

	.pink-btn {
		background: #FF8DD3;
	}

	.orange-btn {
		background: #FF8A65;
	}

	.side-img {
		position: absolute;
		right: 12rpx;
		bottom: 12rpx;
		width: 40rpx;
		height: 60rpx;
		opacity: 0.3;
	}

	.star-decor {
		position: absolute;
		right: 12rpx;
		bottom: 12rpx;
		width: 32rpx;
		height: 32rpx;
		/* background: url('/static/star.png') no-repeat center/contain; */
		opacity: 0.3;
	}

	.filter-bar {
		margin: 16rpx 0 0 0;
		padding: 0 30rpx;
	}

	.city-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.city-scroll {
		display: flex;
		flex-direction: row;
		gap: 12rpx;
		overflow-x: auto;
		white-space: nowrap;
		flex: 1;
	}

	.city {
		font-size: 26rpx;
		color: #fff;
		position: relative;
		padding-bottom: 4rpx;
		display: inline-block;
		margin-right: 12rpx;
	}

	.city.active {
		font-weight: bold;
	}

	.city.active::after {
		content: '';
		display: block;
		width: 80%;
		height: 4rpx;
		background: #57C8F2;
		border-radius: 2rpx;
		margin: 0 auto;
	}

	.city-more {
		color: #57C8F2;
		font-size: 24rpx;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
	}

	.tag-row {
		display: flex;
		gap: 12rpx;
	}

	.tag {
		height: 44rpx;
		border-radius: 16rpx;
		background: #f0f0f0;
		color: #666;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 24rpx;
	}

	.tag-active {
		width: 100rpx;
		background: linear-gradient(90deg, #8e24aa, #e1bee7);
		color: #fff;
		font-weight: bold;
	}

	.guide-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 360rpx 0 24rpx 0;
	}

	.panda-box {
		width: 160rpx;
		height: 120rpx;
		background: #23243a;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 24rpx;
	}

	.panda {
		width: 120rpx;
		height: 80rpx;
	}

	.guide-text {
		font-size: 28rpx;
		color: #B0B0B0;
		text-align: center;
	}

	.bottom-btn-bar {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.plus-btn {
		width: 400rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, #9C6CFE 0%, #FF8DD3 100%);
		display: flex;
		align-items: center;
		box-shadow: 0 4rpx 16rpx rgba(156, 108, 254, 0.08);
	}

	.plus-circle {
		width: 48rpx;
		height: 48rpx;
		background: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 24rpx;
		margin-right: 24rpx;
	}

	.plus-text {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		margin-right: 16rpx;
	}

	.plus-sub {
		color: #fff;
		font-size: 24rpx;
		opacity: 0.8;
	}

	/* 新增无数据样式 */
	.no-data {
		color: #fff;
		text-align: center;
		padding: 20rpx;
		font-size: 28rpx;
	}

	/* 优化卡片交互效果 */
	.main-card,
	.side-card {
		transition: transform 0.2s ease;
	}

	.main-card:hover,
	.side-card:hover {
		transform: translateY(-5rpx);
	}

	/* 优化按钮点击效果 */
	.main-btn,
	.side-btn,
	.plus-btn {
		transition: opacity 0.2s ease;
	}

	.main-btn:active,
	.side-btn:active,
	.plus-btn:active {
		opacity: 0.8;
	}

	.gender-selector {
		display: flex;
		justify-content: center;
		margin: 30rpx 0;
	}

	.gender-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #f5f5f5;
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		position: relative;
		transition: all 0.3s ease;
	}

	.gender-btn::after {
		position: absolute;
		color: #333;
	}

	.gender-btn:nth-child(1)::after {
		content: '小哥哥';
	}

	.gender-btn:nth-child(2)::after {
		content: '小姐姐';
	}

	.gender-btn.all {
		width: auto;
		padding: 0 30rpx;
		border-radius: 50rpx;
		height: 70rpx;
		margin-right: 0;
	}

	.gender-btn.active {
		background-color: #722ED1;
		color: #fff;
		transform: scale(1.05);
		box-shadow: 0 5rpx 15rpx rgba(114, 46, 209, 0.3);
	}

	.gender-btn.active::after {
		color: #fff;
	}

	// 移除多余的闭合括号


	.team-banner {
		background-color: #57C8F2;
		border-radius: 16rpx;
		padding: 24rpx;
		color: #fff;
		position: relative;
		margin-bottom: 24rpx;
	}

	.team-banner::before {
		content: "发财";
		/* 水印文字 */
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0.1;
		/* 透明度 */
		font-size: 50rpx;
		color: #fff;
		display: grid;
		place-content: center;
		transform: rotate(-30deg);
		/* 旋转角度 */
		pointer-events: none;
		/* 禁止交互 */
		background-repeat: repeat;
		/* 重复平铺 */
		background-size: 50rpx 50rpx;
		/* 控制水印密度 */
	}

	.team-title-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
	}

	.team-member-list {

		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;

		.team-shop {
			font-size: 26rpx;
			margin-bottom: 12rpx;
			opacity: 0.9;
			border: 1px solid #fff;
			border-radius: 30rpx;
			padding: 10rpx 15rpx;
		}

		.team-time {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			margin-bottom: 16rpx;
			opacity: 0.9;
			border: 1px solid #fff;
			border-radius: 30rpx;
			padding: 10rpx 15rpx;
		}

	}

	.team-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.gender-tag {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 16rpx;
		padding: 4rpx 16rpx;
		font-size: 24rpx;
	}

	.all {
		background-color: linear-gradient(180deg, #1976d2 50%, #FF8DD3 50%);
	}

	.nan {
		background-color: #1976d2;
	}

	.nv {
		background-color: #FF8DD3;
	}


	.team-status {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 24rpx;
	}

	.member-info,
	.distance-info {
		display: flex;
		align-items: center;
	}

	.status-icon {
		margin-right: 8rpx;
	}

	.share-icon {
		opacity: 0.9;
	}

	.exit-btn-card {
		position: absolute;
		right: 32rpx;
		bottom: 32rpx;
		z-index: 2;
	}
</style>